<!-- 
  @name: 确认支付
  @date: 2020.1.3
  @note: 此页面在支付成功后就关闭，并跳转开始加注页
 -->
<template>
	<view class="content">
		<!-- 金额 -->
		<view class="total">
			<text class="text">实付款</text>
			<text class="icon">￥</text>
			<text class="num">{{moneyAmount}}</text>
		</view>
		
		<!-- 方式选择区 -->
		<view class="way">
			<view
				class="way-1"
				v-for="(item, index) in wayList"
				:key="index"
				@tap="wayChoose(item, index)">
				<view class="icon">
					<view :style="{
						width: item.iw + 'rpx', height: item.ih + 'rpx',
						backgroundImage: item.canable === 1 ? 'url(' + item.img1 + ')' : 'url(' + item.img2 + ')'
					}"></view>
				</view>
				<text class="text" :class="item.canable === 1 ? 't1' : 't2'">{{item.text}}</text>
				<view
					class="check_box"
					:class="paytype === item.paytype ? '_ck1' : '_ck2'"
					v-show="item.canable === 1"></view>
			</view>
		</view>
		
		<!-- 优惠券区 -->
		<view class="ticket" v-show="paytype === 'payonline'" @tap="showTicket = true">
			<view class="cont">
				<text class="text">优惠券</text>
				<text
					class="num"
					v-text="!couponId ? (ticketCanNum + '张可用') : ('优惠' + ticketNum+'元')" 
					v-if="ticketCanNum > 0"></text>
				<text class="tip" v-else>暂无可用</text>
				<view class="icon"></view>
			</view>
		</view>
		
		<!-- 优惠券列表 -->
		<view class="_popup" v-show="showTicket" @tap="showTicket = false"></view>
		<view class="tk-list" :class="showTicket ? 'h1': 'h2'">
			<view class="title">
				<text class="text">优惠券</text>
				<view class="icon" @tap="showTicket = false"></view>
			</view> 
			<view class="tk-info">
				<view
					class="item"
					v-for="(item, index) in ticketList"
					@tap="ticketChoose(item, index)"
					:key="item.userCouponId"
					:style="{
						backgroundImage: item.cuse === 1
						? 'url(http://img.etubang.com/group1/M00/00/40/rBCky15UyDGAUawTAAAib7UahR0786.png)'
						: 'url(http://img.etubang.com/group1/M00/00/40/rBCky14YGGqAdD1xAAAyl3gjsIE118.png)'
					}">
					<view class="left">
						<view class="mey">
							<text class="icon-1">￥</text>
							<text class="text-1" :class="item.couponAmount.length > 5 ? 't2' : ''">{{item.couponAmount}}</text>
						</view>
						<view class="fs" @tap="$navigateTo('/pagesUc/site/busi?onSite=a&couponId=' + item.couponId)">
							<text class="text-2">可用站点</text>
							<view class="icon-2"></view>
						</view>
					</view>
					<view class="middle">
						<view class="text-1 text_over">{{item.operName}}</view>
						<view class="text-2 text_over">加注满
							<text :class="item.cuse === 0 ? 'text-2-2' : ''">{{item.couponOrderAmount}}</text>
							元可用
						</view>
						<view class="text-3">{{item.useBeginTime.replace(/-/g, '.')}}-{{item.useEndTime.replace(/-/g, '.')}}</view>
					</view>
					<view class="right" v-if="item.cuse === 1">
						<view
							class="check_box"
							:class="couponId === item.userCouponId ? '_ck1' : '_ck2'"></view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 添加车辆-无预定拍照时 -->
		<view
			class="add-1"
			v-if="carList.length === 0"
			@tap="$navigateTo('/pagesUc/user-car/add')">
			<view class="icon"></view>
			<text class="text">添加车牌</text>
		</view>
		
		<!-- 添加车辆-有默认牌照时 -->
		<view class="add-2" v-if="carList.length > 0">
			<view class="tip">选择车牌</view>
			<view class="icon"></view>
			<text class="text" @tap="$navigateTo('/pagesUc/user-car/add')">添加车牌</text>
		</view>
		<view class="license" v-if="carList.length > 0">
			<view
				class="btn"
				v-for="(item, index) in carList"
				:key="item.carId"
				:class="item.carNumber === carNumber ? 't2' : 't1'"
				@tap="carChoose(item, index)">
				{{item.carNumber}}
			</view>
		</view>
		
		<!-- 占位，以保证支付按钮不阻挡车牌号 -->
		<view  class="bottom_blank"></view>
		<!-- 确认支付按钮 -->
		<view class="bottom_view">
			<button class="btn_submit" @tap="submit">确认支付：{{moneyPayOnline}}元</button>
		</view>
		
		<!-- 登录提示 -->
		<sign-in @submit="reLogin"></sign-in>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				wayList: [],
				wayList2: [
					{
						img1: 'http://img.etubang.com/group1/M00/00/40/rBCky15U50eADuySAAACuKUKt74830.png',
						img2: 'http://img.etubang.com/group1/M00/00/40/rBCky15U6lmAWgjQAAACydMg-Lg279.png',
						iw: 38, ih: 30, text: '团队余额', paytype: 'teambalance', canable: 0
					},{
						img1: 'http://img.etubang.com/group1/M00/00/3F/rBCky14UAeuAW9q0AAAF0FlWWB8633.png',
						img2: 'http://img.etubang.com/group1/M00/00/40/rBCky15U6mmAOqr-AAAFwiM9hcI835.png',
						iw: 37, ih: 41, text: '账户余额', paytype: 'paybalance', canable: 0
					},{
						img1: 'http://img.etubang.com/group1/M00/00/3F/rBCky14UAfaAfviLAAAExE2fs40189.png',
						img2: 'http://img.etubang.com/group1/M00/00/3F/rBCky14UAfaAfviLAAAExE2fs40189.png',
						iw: 37, ih: 34, text: '微信支付', paytype: 'payonline', canable: 1
					},{
						img1: 'http://img.etubang.com/group1/M00/00/40/rBCky15U6GmATW6CAAAD8bM4y9s449.png',
						img2: 'http://img.etubang.com/group1/M00/00/40/rBCky15U6lmAWgjQAAACydMg-Lg279.png',
						iw: 38, ih: 28, text: '免单支付', paytype: 'payfree', canable: 0
					}
				],
				carList: [],  //车辆列表
				moneyAmount: 0,  //加注金额
				recordNum: 0,  //加注量
				macCode: '',  //机器码
				paytype: 'payonline',  //支付方式id
				carNumber: '',  //选择的牌照
				couponId: '',  //优惠券ID
				ticketNum: 0,  //优惠额度
				ticketCanNum: 0,  //可用优惠券数量
				ticketList: [],  //优惠券列表
				operaId: 0,  //运营商id
				siteId: 0,  //加注站id
				showTicket: false,  //是否显示优惠券列表
				recordCode: '',  //支付后的订单号
			}
		},
		computed: {
			//实际支付金额
			moneyPayOnline() {
				let a = this.$operation(this.moneyAmount, '-', this.ticketNum);
				if(a <= 0) {
					a = this.paytype === 'payonline' ? 0.01 : 0
				};
				return a;
			}
		},
		onLoad() {
			let data = JSON.parse(this.$store.state.tmpData);
			this.$store.commit('setTmpData', '');
			this.moneyAmount = parseFloat(data.moneyAmount);
			this.recordNum = parseFloat(data.recordNum);
			this.macCode = data.macCode;
			this.operaId = data.operaId;
			this.siteId = data.siteId;
			this.promoteCode = data.promoteCode;
			this.getCarList();
			this.checkMian();
			this.getTicket();
			uni.$on('userCar_addCar', this.getCarList);
		},
		onUnload() {
			uni.$off('userCar_addCar', this.getCarList);
		},
		methods: {
			//重新登录
			reLogin() {
				this.getCarList();
				this.checkMian();
				this.getTicket();
			},
			//获取订单信息
			getInfo() {
				this.$http({
					url: this.$api.exchargeUrl + 'getpayinfobycode',
					data: {
						recordCode: this.recordCode,
						payClass: 'PayClass1'
					}
				}).then(async res => {
					this.$store.commit('setTmpData', JSON.stringify(res));
					
					await this.subscribeMsg();
					let url = res.recordType === 'filled'
							  ? './did'
							  : './doing?total=' + this.moneyPayOnline + '&recordNum=' + this.recordNum;
					uni.redirectTo({ url: url });
				});
			},
			//打开微信客户端进行支付
			wxpay(data) {
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: data.timeStamp,
					nonceStr: data.nonceStr,
					package: data.package,
					signType: data.signType,
					paySign: data.paySign,
					success: (res) => {
						this.getInfo();
					}, 
					fail: (err) => {
						let error = JSON.stringify(err);
						if(error.indexOf('cancel') === -1) {
							this.$showToast('支付失败：' + error);
						}
					}
				});
			},
			//支付信息提交
			submit() {
				if(!this.carNumber && this.carList.length > 0) {
					this.$showToast('请选择车牌号');
					return;
				}
				// 余额支付提示
				if(this.paytype === 'teambalance' || this.paytype === 'paybalance') {
					uni.showModal({
						title:'提示',
						content:'确认使用余额支付吗 若确认系统将按实际加注量扣款',
						showCancel:false,
						confirmColor: '#0DC887',
						success: (res) => {
							return this.postPayRecord();
						}
					})
				} else {
					this.postPayRecord();
				}
				
			},
			//提交支付信息
			postPayRecord() {
				if(!this.paytype) {
					this.$showToast('请选择支付方式！');
				}
				this.$http({
					url: this.$api.recordUrl + 'dofilluserorder',
					data: {
						payType: this.paytype,
						macCode: this.macCode,
						moneyAmount: this.moneyAmount,
						recordNum: this.recordNum,
						couponId: this.couponId ? this.couponId : '',
						moneyPayOnline: this.moneyPayOnline,
						carNumber: this.carNumber,
						promoteCode: this.promoteCode,
					},
				}).then(res => {
					console.log(res);
					if(res.code !== 200) {
						uni.showModal({
							title:'提示',
							content:res.msg,
							showCancel:false,
							confirmText:'#FF9900',
						})
					}
					this.recordCode = res.recordCode;
					//设置支付方式  
					this.$store.commit('setPayType', this.paytype);
					if(this.paytype === 'payonline') {
						this.wxpay(res);
					} else { 
						this.getInfo();
					}
				});
			},
			//牌照选择
			carChoose(item, index) {
				this.carNumber = item.carNumber;
			},
			//方法选择
			wayChoose(item, index) {
				if(item.canable === 1) {
					this.paytype = item.paytype;
				}
				if(item.paytype === 'payfree') {
					this.ticketNum = this.moneyAmount;
					this.couponId = '';
				} else {
					this.ticketNum = 0;
					this.couponId = '';
				}
			},
			//优惠券选择
			ticketChoose(item, index) {
				console.log(this.couponId,item.userCouponId);
				if(this.couponId !== item.userCouponId) {
					this.couponId = item.userCouponId;
					this.ticketNum = parseFloat(item.couponAmount);
					this.showTicket = false;
				} else {
					this.couponId = '';
					this.ticketNum = 0;
				}
			},
			//检查是否免单及余额是否能使用
			checkMian() {
				this.wayList = [];
				this.wayList = JSON.parse(JSON.stringify(this.wayList2));
				this.$http({
					url: this.$api.recordUrl + 'judgefree',
					data: {
						macCode: this.macCode
					}
				}).then(res => {
					//检查是否能够免单
					if(res.isFree === 1) {
						this.wayList[3].canable = 1;
					} else {
						this.wayList.splice(3,1);
					}
					//检查个人账户余额是否能用
					let accountAmount = res.accountAmount ? parseFloat(res.accountAmount) : 0;
					this.wayList[1].text += ' (余额: ' + accountAmount + '元)';
					this.wayList[1].canable = this.moneyAmount <= accountAmount ? 1 : 0;
					if(this.wayList[1].canable) {
						this.paytype = 'paybalance'
					}
					//检查团队余额是否能用
					let teamAmount = res.teamAmount ? parseFloat(res.teamAmount) : 0;
					this.wayList[0].text += ' (余额: ' + teamAmount + '元)';
					this.wayList[0].canable = this.moneyAmount <= teamAmount ? 1 : 0;
					if(this.wayList[0].canable) {
						this.paytype = 'teambalance'
					}
				});
			},
			//获取优惠券列表
			getTicket() {
				this.$http({
					url: this.$api.couponUrl + 'getshopusercouponlistbyoperator',
					data: {
						operaId: this.operaId, // this.operaId
						siteId: this.siteId
					}
				}).then(res => {
					let arr = res;
					this.ticketList = [];
					this.ticketCanNum = 0;
					if(arr && arr.length > 0){
						arr.forEach((item, index) => {
							item.cuse = parseFloat(item.couponOrderAmount) <= this.moneyAmount ? 1 : 0;
							this.ticketList.push(item);
							if(item.cuse === 1) this.ticketCanNum += 1;
						});
					}
				});
			},
			//获取车辆列表
			getCarList() {
				this.$http({
					url: this.$api.userUrl + 'getmycarlist',
					data: {
						isNavigate: 0
					}
				}).then(res => {
					this.carList = [];
					this.carList = this.carList.concat(res);
				});
			},
			// 订阅模板消息
			subscribeMsg() {
				// 优惠券到账 noLo9jvRO1v4vpH1gTaAL9TfsYhdO2dq-GK3GvTyNBE 
				return new Promise((resolve,reject) => {
					uni.requestSubscribeMessage({
						tmplIds: ['kdvepx5r_nypYEumDY6D-v9dQrHWnhkCrMbt2hcNCzc', 'SUh-y5We1npRM10ykmOVrVSAjhj1XpfVF5LHk7dAebc'],
						complete:()=> {
							uni.showLoading({
								title:'加载中'
							})
							resolve();
						}
					});
				})
				
			}
		}
	}
</script>

<style lang="scss">
	/* 金额 */
	.total {
		width: 750rpx;
		padding-top: 62rpx;
		padding-bottom: 50rpx;
		text-align: center;
		color: $color-primary;
		background-color: $color-white;
		.text{
			font-size: 30rpx;
		}
		.icon {
			margin-left: 20rpx;
			font-size: 38rpx;
			font-weight: bold;
		}
		.num {
			font-size: 72rpx;
			font-family: $font-family-num;
			margin-left: 12rpx;
			margin-bottom: -15rpx;
		}
	}
	
	/* 方式 */
	.way {
		width: 750rpx;
		margin-top: $spacing-col;
		padding: 0 30rpx;
		background-color: $color-white;
		.way-1 {
			width: 100%;
			display: flex;
			flex-direction: row;
			padding: 38rpx 0;
			align-items: center;
			border-bottom: 1rpx solid $color-list;
			.icon {
				width: 38rpx;
				display: flex;
				justify-content: center;
			}
			.text {
				flex: 1;
				margin-left: 28rpx;
				font-size: 30rpx;
			}
			.text.t1 {
				color: $color-text;
			}
			.text.t2 {
				color: #ccc;
			}
		}
		.way-1:last-child {
			border-bottom: none;
		}
	}
	
	/* 优惠券 */
	.ticket {
		width: 750rpx;
		padding: 0 30rpx;
		margin-top: $spacing-col;
		background-color: $color-white;
		.cont {
			width: 100%;
			height: 106rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
		}
		.text {
			flex: 1;
		}
		.tip {
			color: $color-grey;
		}
		.num {
			color: $color-primary;
			font-weight: 500;
		}
		.icon {
			width: 13rpx;
			height: 22rpx;
			margin-left: 20rpx;
			background-image: url('http://img.etubang.com/group1/M00/00/40/rBCky15U7tCANlYcAAACBzprVLY943.png');
		}
	}
	
	/* 优惠券列表 */
	.tk-list.h1 {
		height: calc(100vh - 240rpx);
	}
	.tk-list.h2 {
		height: 0;
	}
	.tk-list {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		z-index: $z-index-popup-info;
		background-color: $color-white;
		border-radius: 20rpx 20rpx 0 0;
		transition: height 0.3s;
		.title {
			width: 100%;
			height: 104rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.text {
				font-size: 32rpx;
				margin-left: 330rpx;
			}
			.icon {
				display: inline-block;
				width: 25rpx;
				height: 25rpx;
				margin-left: 270rpx;
				background-image: url('http://img.etubang.com/group1/M00/00/40/rBCky15V3mmAOSJWAAACRH71aow409.png');
			}
		}
	}
	.tk-info {
		width: 750rpx;
		height: calc(100vh - 344rpx);
		overflow-y: scroll;
	}
	.item {
		display: flex;
		flex-direction: row;
		width: 709rpx;
		height: 228rpx;
		padding: 10rpx;
		margin: 5rpx 20rpx;
		.left {
			width: 160rpx;
			text-align: center;
			.mey {
				width: 100%;
				margin-top: 50rpx;
				text-align: center;
				color: $color-white;
			}
			.icon-1 {
				font-size: 30rpx;
			}
			.text-1 {
				font-family: $font-family-num;
				font-size: 46rpx;
				margin-left: 4rpx;
			}
			.text-1.t2 {
				font-size: 38rpx;
			}
			.fs{
				width: 100%;
				margin-top: 12rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
			}
			.text-2 {
				color: $color-white;
				font-size: 24rpx;
			}
			.icon-2 {
				width: 12rpx;
				height: 21rpx;
				margin-left: 10rpx;
				background-image: url('http://img.etubang.com/group1/M00/00/3F/rBCky14T_62ADVMnAAAA5kpefWc398.png');
			}
		}
		.middle {
			flex: 1;
			padding-left: 35rpx;
			
			.text-1 {
				margin-top: 32rpx;
			}
			.text-2 {
				margin-top: 20rpx;
				font-size: 30rpx;
			}
			.text-2-2 {
				color: $color-text-primary;
			}
			.text-3 {
				margin-top: 20rpx;
				font-size: 24rpx;
			}
		}
		.right {
			margin-top: 80rpx;
			margin-right: 20rpx;
		}
	}
	
	/* 添加牌照 */
	.add-1,
	.add-2 {
		width: 750rpx;
		height: 106rpx;
		margin-top: 24rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: $color-white;
	}
	/* 添加牌照-无默认牌照时 */
	.add-1 {
		.icon {
			width: 39rpx;
			height: 39rpx;
			margin-left: 260rpx;
			background-image: url('/static/wxImage/icon-add.png');
		}
		.text {
			margin-left: 30rpx;
			color: $color-primary;
		}
	}
	/* 添加牌照-有默认牌照 */
	.add-2 {
		padding: 0 30rpx;
		.tip {
			flex: 1;
		}
		.icon {
			width: 37rpx;
			height: 37rpx;
			background-image: url('/static/wxImage/icon-add.png');
		}
		.text {
			margin-left: 31rpx;
			color: $color-primary;
		}
	}
	.license {
		width: 100%;
		height: auto;
		max-height: 420rpx;
		overflow-y: scroll;
		padding-left: 5rpx;
		padding-bottom: 30rpx;
		background-color: $color-white;
		.btn {
			display: inline-block;
			padding: 32rpx 35rpx;
			text-align: center;
			margin: 15rpx 25rpx;
			border-radius: $border-radius-bm;
		}
		.btn.t1 {
			color: $color-grey-dark;
			background: $color-bg;
		}
		.btn.t2 {
			color: $color-primary;
			background-color: rgba(13, 200, 135, 0.1);
		}
	}
	
	/* 支付按钮 */
	.bottom_view {
		align-items: center;
	}
</style>
